<template>

  <el-select
    v-model="contactId"
    style="width: 100%"
    filterable
    remote
    reserve-keyword
    clearable
    automatic-dropdown
    placeholder="请选择联系人"
    :remote-method="fetchList"
    @change="handlerChange"
  >
    <el-option
      v-for="item in list"
      :key="item.id"
      :label="item.name"
      :value="item.id"
    />
  </el-select>

</template>

<script>

import { apiContactsPaging } from '@/api/customer/linkman'

export default {
  name: 'ContactsSelect',
  props: {
    customerId: String,
    value: String
  },
  data() {
    return {
      // 下拉选项值
      list: [],
      contactId: '',
      listQuery: {
        current: 1,
        size: 20,
        params: {
          customerId: ''
        }
      }
    }
  },

  watch: {
    // 检测查询变化
    value: {
      handler(val) {
        this.contactId = val
      }
    },

    // 检测查询变化
    customerId: {
      handler(val) {
        this.listQuery.params.customerId = val
      }
    }
  },
  created() {
    this.contactId = this.value
    this.listQuery.params.customerId = this.customerId
    this.fetchList()
  },
  methods: {

    fetchList(val) {
      this.listQuery.params.name = val
      apiContactsPaging(this.listQuery).then(response => {
        this.list = response.data.records
      })
    },
    handlerChange(e) {
      this.$emit('change', e)
      this.$emit('input', e)
    }
  }
}
</script>
